<template>
	<div class="base-info-content">
		<el-form ref="ruleFormRef" label-width="180px">
            <el-form-item label="商品主图：" prop="imgUrl">
				<section>
					<el-image v-if="props.goodsData.imgUrl != ''" class="mr20"
						style="width:64px; height: 64px;border-radius: 5px;" :src="props.goodsData.imgUrl" fit="cover" />
					<section v-else class="selector-img" @click="addImg('imgUrl', 0)">
						<el-icon size="30" color="#999">
							<Plus />
						</el-icon>
					</section>
				</section>
			</el-form-item>
            <el-form-item label="商品轮播图：">
				<section>
					<section class="flex">
						<el-image v-for="(item, index) in props.goodsData.imgOnlineArr" :key="index" class="mr20"
							style="width:64px; height: 64px;border-radius: 5px;" :src="item" fit="cover" />
						<section class="selector-img" @click="addImg('imgOnlineArr', 1)">
							<el-icon size="30" color="#999">
								<Plus />
							</el-icon>
						</section>
					</section>
				</section>
			</el-form-item>
            <el-form-item label="商品标题：" prop="title">
				<el-input class="width420" v-model="props.goodsData.title" placeholder="请输入商品标题" />
			</el-form-item>
            <el-form-item label="活动秒杀简介：" prop="title">
				<el-input class="width420" 
                    maxlength="30"
                    style="width: 240px"
                    placeholder="请输入商品标题秒杀简介"
                    show-word-limit
                    type="textarea"/>
			</el-form-item>

            <el-form-item label="运费模板：">
				<section style="display: flex;flex-direction: column;">
					<section class="flex">
						<el-select placeholder="请选择运费模板" class="width420">
							<el-option  label="item.label" value="item.value" />
						</el-select>&emsp;
					</section>
				</section>
			</el-form-item>
            <el-form-item label="当天参与活动次数：" prop="title">
				<el-input class="width420" placeholder="" />
			</el-form-item>
            <el-form-item label="活动日期："  prop="title">
				<section class="width420">
                    <el-date-picker class="width420"  type="daterange" unlink-panels 
                    format="YYYY/MM/DD" value-format="YYYY-MM-DD" range-separator="-" 
                    start-placeholder="开始日期" end-placeholder="结束日期" />
                </section>
			</el-form-item>
            <el-form-item label="活动时间：" prop="title">
				<section class="flex">
					<el-select placeholder="请选择活动时间" class="width420">
						<el-option  label="item.label" value="item.value" />
					</el-select>&emsp;
				</section>
			</el-form-item>
            <el-form-item label="活动状态：" prop="title">
				<el-switch />
			</el-form-item>
            <el-form-item label="商品属性：" prop="title">
				<el-table :data="props.goodsData.skuList" border
					:header-cell-style="{ textAlign: 'center'}" :cell-style="{ textAlign: 'center' }">
					<!-- <el-table-column v-for="(item, index) of props.goodsData.specList" :prop="item.key"
						:label="item.name" :key="index" width="100">
						<template #default="scope">
							<span>{{ scope.row.skuSpecList[index].name }}</span>
						</template>
					</el-table-column> -->
					<el-table-column label="图片" align="center">
						<template #default="scope">
							<section style="width:32px; height: 32px;display: inline-block;" @click="addImg('skuImgUrl', 0, scope.$index)">
								<el-image v-if="scope.row.skuImgUrl != '' && scope.row.skuImgUrl != null"
									style="width:32px; height: 32px;border-radius: 5px;" :src="scope.row.skuImgUrl" fit="cover" />
								<section v-else class="selector-img" style="width:32px; height: 32px;border-radius: 5px;">
									<el-icon size="32" color="#999" style="width:32px; height: 32px;border-radius: 5px;" >
										<Plus />
									</el-icon>
								</section>
							</section>
						</template>
					</el-table-column>
					<el-table-column label="商品属性" show-overflow-tooltip>
						<template v-slot="scope">
							<span>{{ scope.row.skuTypeName }}</span>
						</template>
					</el-table-column>
					<el-table-column label="秒杀价" show-overflow-tooltip>
						<template v-slot:header>
							秒杀价
							<el-popover placement="top-start" trigger="hover"
								content="商品秒杀价格">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<el-form-item :prop="`skuList.${scope.$index}.retailPrice`" 
								:rules="[{ required: true, message: '请输入', trigger:'blur'}, { pattern: /^[1-9]\d*(\.\d+)?$/, message: '请输入正确的金额', trigger: 'blur' }]">
								<el-input v-model="scope.row.referencePrice" placeholder="请输入" >
									<template #append>
										<span>元</span>
									</template>
								</el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="零售价" show-overflow-tooltip>
						<template v-slot:header>
							零售价
							<el-popover placement="top-start" trigger="hover"
								content="商品销售价格">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<el-form-item>
								<span>{{scope.row.retailPrice}}元</span>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="划线价" show-overflow-tooltip>
						<template v-slot:header>
							划线价
							<el-popover placement="top-start" trigger="hover"
								content="线上展示使用，建议填写商品指导价">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<el-form-item>
								<span>{{scope.row.referencePrice}}元</span>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="最低价" show-overflow-tooltip>
						<template v-slot:header>
							最低价
							<el-popover placement="top-start" trigger="hover"
								content="商品控价价格，低于该价格商品禁止销售">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<el-form-item>
								<span>{{scope.row.lowPrice}}元</span>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="成本价" show-overflow-tooltip>
						<template v-slot:header>
							成本价
							<el-popover placement="top-start" trigger="hover"
								content="商品成本价格，用来核算商品利润，不填写则无法核算利润">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<el-form-item>
								<span>{{scope.row.costPrice}}元</span>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="库存" show-overflow-tooltip>
						<template v-slot:header>
							库存
							<el-popover placement="top-start" trigger="hover"
								content="系统支持0库存门店销售。但商品库存为0时，线上将无法销售">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<el-form-item>
								<span>{{scope.row.stock}}元</span>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="限量" show-overflow-tooltip>
						<template v-slot:header>
							限量
							<el-popover placement="top-start" trigger="hover"
								content="商品秒杀限定数量">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<el-form-item :prop="`skuList.${scope.$index}.retailPrice`" 
								:rules="[{ required: true, message: '请输入', trigger:'blur'}, { pattern: /^[1-9]\d*(\.\d+)?$/, message: '请输入正确的金额', trigger: 'blur' }]">
								<el-input v-model="scope.row.referencePrice" placeholder="请输入" >
								</el-input>
							</el-form-item>
						</template>
					</el-table-column>
				</el-table>
			</el-form-item>
		</el-form>
		<AddInformation @selectFun="selectFun" ref="addInformationRef" />
	</div>
</template>
<script setup lang="ts" name="funWangEditor">
import { reactive, onMounted, ref,defineAsyncComponent} from 'vue';
import { Plus,QuestionFilled } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
const AddInformation = defineAsyncComponent(() => import('/@/components/information/AddInformation.vue'))
const addInformationRef = ref()
const ruleFormRef = ref<FormInstance>()
const props = defineProps({
	goodsData: {
		type: Object,
		default: () => {},
	}
})
const state = reactive({
	// 添加图片类型
	addFileType: '',
	// 商品类型列表
	brandList: [] as Array<any>,
	// 门店商品分类
	storeCategoryList: [] as Array<any>,
	// 商城商品分类
	shopCategoryList: [] as Array<any>,
})

const rules = reactive<FormRules<any>>({

})

// 图片选中
const addImg = (type: string, isArr: Number) => {
	state.addFileType = type;
	addInformationRef.value.openDialog(isArr)
}

// 图片选中回调
const selectFun = (fileList: any) => {
	if (state.addFileType == 'imgUrl') {
		props.goodsData.imgUrl = fileList[0]
	} else if (state.addFileType == 'imgOblongUrl') {
		props.goodsData.imgOblongUrl = fileList[0]
	} else if (state.addFileType == 'imgOnlineArr') {
		props.goodsData.imgOnlineArr = fileList
	}
}



// 页面加载时
onMounted(() => {

});

</script>

<style lang="scss" scoped>
.base-info-content {
	.form-ele-size {
		width: 260px;
	}

	.line-title {
		font-size: 18px;
		padding: 8px 12px;
		background-color: #eceef0;
		border-radius: 6px;
		margin-bottom: 15px;
	}

	.selector-img {
		width: 64px;
		height: 64px;
		border: 1px solid #ededed;
		border-radius: 5px;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;

		&:hover {
			background-color: #f5f5f5;
			border: 1px solid #e4e3e3;
		}
	}
	.specItemBox{
		position: relative;
		width: min-content
	}
	.specItemBox .close-tag{
		position: absolute;
		cursor: pointer;
		top:-6px; 
		right:-6px;
		display: none;
	}

	.specItemBox:hover .close-tag {
		display: inline; /* 鼠标悬浮时显示关闭标签 */
	}

	.batchSettingsBox {
      display: flex;
      justify-content: flex-start;
      .input-wrapper {
        position: relative;
        width: 100px;
        height: 35px;
        line-height: 35px;
        margin-right: 10px;
        box-sizing: border-box;
		label{
			height:18px;
			color: var(--el-color-primary);
			background:var(--el-color-white)
		}
      }

      input {
        border: none;
        background: none;
        width: 100px;
        height: 35px;
        font-size: 18px;
        border-radius: 4px;
        border: 1px solid var(--el-color-primary) !important;
        outline: none;
      }
      label {
        position: absolute;
        top: 2px;
        left: 20px;
        font-size: 16px;
        color: #FFF;
        pointer-events: none;
        transition: 0.2s ease all;
      }

      input:focus+label,
      input:not(:placeholder-shown)+label {
        top: -10px;
        left: 8px;
        font-size: 14px;
        border-color: #007acc;
        color: #2D8CF0 !important;
		height:18px;
		line-height:18px;
      }
    }
}
</style>
